<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Notepad</title>

    <!-- bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- bootstrap-validator -->
    <link
      rel="stylesheet"
      href="./assets/plugins/bootstrap-validator/bootstrapValidator.min.css"
    />

    <!-- mui -->
    <link rel="stylesheet/less" href="./assets/plugins/mui/css/mui.min.css" />

    <!-- 重置样式 -->
    <link rel="stylesheet/less" href="./assets/css/reset.less" />

    <!-- 公共样式 -->
    <link rel="stylesheet/less" href="./assets/css/common.less" />

    <!-- 页面独立的 -->
    <link rel="stylesheet/less" href="./assets/css/UserLogin.less" />
  </head>
  <body>
    <!-- 用户信息 -->
    <div class="user">
      <div class="avatar wow fadeInUp">
        <img src="./assets/images/avatar.png" />
      </div>

      <div class="notice wow fadeInUp" data-wow-delay="100ms">
        请填写已有账号或新注册账号
      </div>
    </div>

    <form id="login" class="login wow fadeInUp" data-wow-delay="200ms">
      <div class="form-group">
        <label for="mobile">手机</label>
        <input
          type="text"
          class="form-control"
          id="mobile"
          name="mobile"
          placeholder="请输入手机号"
        />
      </div>

      <div class="form-group">
        <label for="password">密码</label>
        <input
          type="password"
          class="form-control"
          id="password"
          name="password"
          placeholder="请输入密码"
        />
      </div>

      <div class="action">
        <button class="btn">登录</button>
      </div>

      <div class="action" style="text-align: center">
        <a href="./register.html">注册页面</a>
      </div>
    </form>
  </body>
</html>
<!-- 解析less的文件 -->
<script src="./assets/js/less.min.js"></script>

<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- bootstrap-validator -->
<script src="./assets/plugins/bootstrap-validator/bootstrapValidator.min.js"></script>

<!-- mui -->
<script src="./assets/plugins/mui/js/mui.min.js"></script>

<!-- 引入接口插件+封装请求的方法 -->
<script src="./assets/plugins/axios/axios.min.js"></script>
<script src="./assets/plugins/axios/request.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.js"></script>

<!-- 引入cookie -->
<script src="./assets/plugins/cookie.js"></script>

<script>
  //实例化wow.js
  new WOW().init();

  // 实例化表单验证器
  $("#login")
    .bootstrapValidator({
      // 全体验证配置项
      message: "表单内容不能为空",
      // 图标
      feedbackIcons: {
        /*input状态样式图片*/
        valid: "glyphicon glyphicon-ok",
        invalid: "glyphicon glyphicon-remove",
        validating: "glyphicon glyphicon-refresh",
      },
      // 需验证字段
      fields: {
        // input的name名
        mobile: {
          validators: {
            notEmpty: {
              message: "手机号不能为空",
            },
            stringLength: {
              min: 11,
              max: 11,
              message: "用户名必须是11位数字",
            },
            regexp: {
              regexp: /^1[3-9]\d{9}$/,
              message: "手机号错误",
            },
          },
        },
        password: {
          validators: {
            notEmpty: {
              message: "密码不能为空",
            },
          },
        },
      },
    })
    // bootstrapvvalidator自定义事件
    .on("success.form.bv", function (e) {
      // 阻止多次提交，提交之后按钮就取消掉默认的提交功能了
      e.preventDefault();
    });
  // 提交获取数据
  $("#login").submit(async function () {
    let bootstrapValidators = $("#login").data("bootstrapValidator");
    // 判断整个form表单的校验状态，如果全通过就不走这块
    // 通过引用对象的不同也可以获取局部的校验状态 #mobile.bootstrapValidator
    if (!bootstrapValidators.isValid()) {
      $("#login").data("bootstrapValidator").resetForm(true); // 重置校验
      return false;
    }

    let data = {
      mobile: $("#mobile").val(),
      password: $("#password").val(),
    };

    let result = await POST({ url: "business/login", params: data });
    console.log(result);

    if (result.code == 1) {
      cookie.set("business", JSON.stringify(result.data));
      mui.toast(result.msg);

      setTimeout(() => {
        location.href = "./user.html";
      }, 2000);
    } else {
      mui.toast(result.msg + "" + result.params);
    }
  });
</script>
